<template>
  <!-- 右侧模块 -->
  <div class="table-one">
    <div class="right-box">
      <!-- 遥感监测 -->
      <dv-border-box-12 class="right-box1">
        <div class="tit1">
          遥感监测
        </div>
        <div class="bigBox">
          <div v-for="item in res1" :key="item.code" class="box">
            <div class="image">
              <img :src="item.image">
            </div>
            <div class="tit">{{ item.tit }}</div>
          </div>
        </div>
      </dv-border-box-12>
      <!-- 农业传感与设备 -->
      <dv-border-box-12 class="right-box2 item">
        <div class="tit2">农业传感与设备</div>
        <div class="bigBox">
          <div v-for="item in res2" :key="item.code" class="box">
            <img :src="item.img" alt="">
            <div class="tit">
              {{ item.tit }}<span class="txt"> {{ item.num }}</span>
            </div>
          </div>
        </div>
      </dv-border-box-12>
    </div>
  </div>
</template>

<script>
import imgSatellite from '@/assets/image/weixing.png'
import imgUAV from '@/assets/image/wurenji.png'
import imgGround from '@/assets/image/jiance.png'
import { image1, image2, image3, image4, image5, image6, image7, image8, image9, image10, image11, image12 } from '@/utils/image'

export default {
  name: 'QsgSystemTableone',

  data() {
    return {
      res1: [
        { code: 1, tit: '卫星遥感', image: imgSatellite },
        { code: 2, tit: '无人机遥感', image: imgUAV },
        { code: 3, tit: '基地遥感', image: imgGround }
      ],
      res2: [
        { num: 1, code: 1, tit: '物候检测仪', img: image1 },
        { num: 1, code: 2, tit: '长势检测仪', img: image2 },
        { num: 1, code: 3, tit: '视频监控', img: image3 },
        { num: 1, code: 4, tit: '气象监测站', img: image4 },
        { num: 1, code: 5, tit: '水质检测仪', img: image5 },
        { num: 1, code: 6, tit: '土壤墒情监测', img: image6 },
        { num: 1, code: 7, tit: '病害检测仪', img: image7 },
        { num: 1, code: 8, tit: '虫害检测仪', img: image8 },
        { num: 1, code: 9, tit: '巡检无人机', img: image9 },
        { num: 1, code: 10, tit: '测绘无人机', img: image10 },
        { num: 1, code: 11, tit: '巡检机器人', img: image11 },
        { num: 1, code: 12, tit: '修建机器人', img: image12 }
      ]
    }
  },

  mounted() {

  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
.table-one{
  height: 100%;
}
.right-box {
  display: flex;
  flex-direction: column;
  height: 100%;  /* 或者设置父容器的高度 */
  margin-bottom: 10%;
}

// 右侧第一个盒子
.right-box1 {
  width: 100%;
  height: 25%;
  padding-top: 20px;
  margin-bottom: 10px;
  .tit1 {
    width: 90px;
    height: 20px;
    text-align:center;
    margin-left: 20px;
    border-left: 3px solid #e6c960;
    border-right: 3px solid #e6c960;
    margin-bottom: 20px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 700;
  }
  .bigBox {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }
  .box {
    width: 100px;
    height: 70px;
    text-align: center;
    .image {
      margin-top: 10px;
    }
    .tit {
      margin-top: 10px;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 600;
    }
  }
}
// 右侧第二个盒子
.right-box2 {
  width: 100%;
  height: 75%;
  padding-top: 20px;
    .tit2 {
    width: 140px;
    height: 20px;
    text-align:center;
    margin-left: 20px;
    border-left: 3px solid #e6c960;
    border-right: 3px solid #e6c960;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 700;
  }
    .bigBox {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0 20px;
    margin-top: 20px;
    text-align: center;
    .box {
      width: 115px;
      height: 100px;
        margin-bottom: 8px;
        img {
          width: 70px;
          height: 70px;
        }

      .tit {
      text-align: center;
      font-size: 13px;
      flex-wrap: wrap;
      width: 110px;
      height: 65px;
      font-weight: 600;
      padding-top: 10px;
      .txt {
        // margin-top: 30px;
        // font-size: 14px;
        // text-align: center;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 700;
      }
    }
    }

  }
}
</style>
